<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <!--<input type="button" value="click"><br>-->
    <input type="button" value="click2" onclick="f1()"><br>
    <div id="d">

    </div>
    <script>
        //找到文本框，给文本框赋值
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.type === "text") {
                //如果是文本框，赋值
                input.value = i;
            }
        }

        //点击按钮，获取文本框的值用,分割
        //因为大量拼接字符串消耗内存（因为字符串的不可变）
        // function f1() {
        //     var str = "";
        //     var inputs = document.getElementsByTagName("input");
        //     for (var i = 0; i < inputs.length; i++) {
        //         var input = inputs[i];
        //         if (input.type === "text") {
        //             str += input.value + ",";
        //         }
        //     }
        //     console.log(str);
        // }


        //使用数组可以解决字符串拼接的效率问题
        function f1() {
            var array = [];
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type === "text") {
                    //往数组的最后追加元素
                    array.push(input.value);
                }
            }
            //join()默认会把数组的中的每一项用，分割，返回一个字符串
            var str = array.join("-");
            console.log(str);
            var d = document.getElementById("d");
            d.innerHTML = str;
        }
    </script>
</body>

</html>